<template>
  <div>
    <router-view />
    <div class="footer">
      <van-tabbar v-model="$store.state.path" active-color="red">
        <van-tabbar-item
          v-for="item in list"
          :key="item.path"
          :to="item.path"
          :url="item.path"
          ><span>{{ item.title }}</span>
          <template #icon>
            <img
              :src="$store.state.path === item.path ? item.img : item.imga"
            />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import {mapActions,mapMutations, mapState} from 'vuex'
export default {
  computed:{
    ...mapState({
      path:state=>state.home.path
    })
  },
  methods:{
    ...mapActions(['checkpathFn']),
    ...mapMutations(['setpath'])
  },
  mounted(){
    console.log(this.checkpathFn(111));
  },
  data() {
    return {
      list: [
        {
          title: '首页',
          img: require('@/assets/img/首页_slices/组 21.png'),
          imga: require('@/assets/img/首页_slices/组 211.png'),
          path: '/shouye'
        },
        {
          title: '车辆',
          img: require('@/assets/img/首页_slices/组 266.png'),
          imga: require('@/assets/img/首页_slices/组 26.png'),
          path: '/car'
        },
        {
          title: '我的',
          img: require('@/assets/img/首页_slices/组 244.png'),
          imga: require('@/assets/img/首页_slices/组 24.png'),
          path: '/my'
        }
      ]
    }
  },
  beforeRouteEnter(to, from, next) {
    /** 进入之前，存下path */
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    store.commit('setPath', to.path)
    // console.log(to.path);
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
      /** 进入之前，存下path */
    store.commit('setPath', to.path)
    // console.log(to.path);
    next()
  }
}
</script>

<style lang="less" scoped>
.footer {
  /deep/ .van-tabbar-item__text {
    font-size: 0.5333rem;
  }
}
/deep/ .van-tabbar {
  height: 2.6667rem !important;
}
/deep/ .van-tabbar-item__icon img {
  width: 1.0667rem;
  height: 1.0667rem;
}
</style>
